<template>
    <div class="w-full flex justify-center shadow-lg h-14 bg-background">
        <div class="max-w-6xl flex justify-between flex-grow mx-2 items-center">
            <div class=" font-extrabold text-primary text-lg font-mono">DISKKA</div>
            <div class="flex items-center gap-2" ref="target">
                <div  class="transition-all duration-200 overflow-hidden" :class="active ? 'w-40' : 'w-0'">
                    <input ref="searchInput" type="text" class="p-2 border-2 outline-none rounded-lg w-40 focus:border-primary">
                </div>
                <i class="ri-search-line cursor-pointer select-none text-lg rounded-full hover:bg-slate-500 hover:text-white transition-all duration-200 p-1 flex w-10 h-10 items-center justify-center "
                    @click="dropDown"></i>
            </div>
        </div>
    </div>
</template>


<script>
import { defineComponent, ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default defineComponent({
    props: ['list', 'message'],
    setup() {
        const target = ref(null)
        const active = ref(false)
        const searchInput = ref(null)
        const dropDown = () => {
            active.value = true
            searchInput.value.focus()
        }
        onClickOutside(target, (event) => {
            active.value = false
        })
        return { target, active, dropDown,searchInput }
    }
})

</script>